<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ToDoList</title>
    <style>
        *{
    margin: 0;
    padding: 0;
}
body{
    height: max-content;
    width: 100%;
    background-color: #cdcdcd;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}
#app{
    width: 100%;
    height: 100%;
    background-color: #cdcdcd;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}
.head{
    background-color: #323232;
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.head-box{
    width: 600px;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.head-box >h2{
    color: #dddddd;
}
.head-box > input{
    width: 356px;
    height: 24px;
    border-radius: 6px;
    padding-left: 10px;
}
.list{
    width: 600px;
    /* background-color: #fff; */
}
.list-head{
    height: 80px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.count{
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background-color: #e6e6fa;
    color: #666666;
    text-align: center;
}
    </style>
    <link rel="stylesheet" href="./index.css">
    <script src="./vue.global.js"></script>
</head>
<body>
    <div id="app">
        <div class="head">
            <div class="head-box">
                <h2>ToDoList</h2>
                <input @:change="add" v-model="newToDo" type="text" placeholder="添加ToDo">
            </div>
        </div>
        <!-- 正在完成列表 -->
        <ul class="list">
            <div class="list-head">
                <h2>正在完成</h2>
                <div class="count">{{ todo_list.length }}</div>
            </div>
            <li><input type="text"value="aaa"></li>
            <!-- <div v-for="item of todo_list">{{item}}</div> -->
            <li v-for="(item, index) in todo_list" :key="index">{{ item }}</li>
        </ul>
        <!-- 已经完成列表 -->
        <ul class="list">
            <div class="list-head">
                <h2>正在完成</h2>
                <div class="count">0</div>
            </div>
        </ul>
    </div>
    <script>
        // // 初始化事件列表
        // let todo_list = [];
        // // 初始化完成列表
        // let finished = [];
        // 创建对象
        const app = Vue.createApp({
            data(){
                return{
                    todo_list:[],
                    finished:[],
                    newToDo:""
                }
            },
            methods:{
                add(){
                    // console.log(this.newToDo);
                    todo_list.push(this.newToDo);
                    this.newToDo = "";
                    console.log(todo_list);
                }
            }
        })
        app.mount("#app")
    </script>
</body>
</html>